Feedback Widget

{
  type: "text",
  name: "title",
  label: "Title",
  required: true,
  placeholder: "Enter a title..."
}

{
  type: "textarea",
  name: "details",
  label: "Details",
  placeholder: "Tell us more..."
}

{
  type: "emoji",
  name: "sentiment",
  label: "How was your experience?",
  required: true
}

{
  type: "emoji",
  name: "sentiment",
  label: "Rate this feature",
  required: true,
  emojiOptions: [
    { emoji: "👎", label: "Not useful" },
    { emoji: "😐", label: "Okay" },
    { emoji: "👍", label: "Useful" },
    { emoji: "🔥", label: "Love it" },
  ]
}

{
  type: "star-rating",
  name: "rating",
  label: "Rate your experience",
  required: true
}

{
  type: "select",
  name: "category",
  label: "Category",
  options: ["Bug Report", "Feature Request", "General Feedback", "Other"]
}

{
  type: "nps",
  name: "score",
  label: "How likely are you to recommend us?",
  required: true
}

BuildBetterFeedback.create({
  apiKey: "YOUR_API_KEY",
  feedbackSourceId: "YOUR_SOURCE_ID",
  mode: "floating",
  position: "bottom-right",
  title: "How are we doing?",
  fields: [
    { type: "nps", name: "nps_score", label: "How likely are you to recommend us?", required: true },
    { type: "textarea", name: "reason", label: "What's the main reason for your score?", placeholder: "Optional" },
  ],
  person: {
    email: currentUser.email,
    firstName: currentUser.name,
  },
  theme: {
    primaryColor: "#2563eb",
  },
});

<div id="docs-feedback"></div>
<script src="https://app.buildbetter.app/widget/feedback-widget.js"></script>
<script>
  BuildBetterFeedback.create({
    apiKey: "YOUR_API_KEY",
    feedbackSourceId: "YOUR_SOURCE_ID",
    mode: "popover",
    container: "#docs-feedback",
    openDirection: "above",
    buttonText: "Was this helpful?",
    title: "Page Feedback",
    fields: [
      { type: "emoji", name: "helpful", label: "How helpful was this page?", required: true },
      { type: "textarea", name: "feedback", label: "How can we improve it?", placeholder: "Optional" },
    ],
    metadata: {
      page_url: window.location.href,
      page_title: document.title,
    },
  });
</script>

<h2>Request a Feature</h2>
<div id="feature-request"></div>

<script src="https://app.buildbetter.app/widget/feedback-widget.js"></script>
<script>
  BuildBetterFeedback.create({
    apiKey: "YOUR_API_KEY",
    feedbackSourceId: "YOUR_SOURCE_ID",
    mode: "inline",
    container: "#feature-request",
    title: "Tell us what you need",
    fields: [
      { type: "text", name: "title", label: "Feature title", required: true, placeholder: "Brief description" },
      { type: "textarea", name: "description", label: "Details", required: true, placeholder: "Describe the feature and why it would be useful..." },
      { type: "select", name: "priority", label: "How important is this?", options: ["Nice to have", "Important", "Critical"] },
      { type: "select", name: "area", label: "Product area", options: ["Dashboard", "Reports", "Integrations", "API", "Other"] },
    ],
    person: {
      email: currentUser.email,
      firstName: currentUser.firstName,
      lastName: currentUser.lastName,
    },
  });
</script>

BuildBetterFeedback.create({
  apiKey: "YOUR_API_KEY",
  feedbackSourceId: "YOUR_SOURCE_ID",
  mode: "floating",
  position: "bottom-left",
  buttonText: "Rate this page",
  title: "Quick Feedback",
  fields: [
    {
      type: "emoji",
      name: "reaction",
      label: "Was this page helpful?",
      required: true,
      emojiOptions: [
        { emoji: "👎", label: "Not helpful" },
        { emoji: "😐", label: "Somewhat helpful" },
        { emoji: "👍", label: "Very helpful" },
      ],
    },
  ],
  theme: {
    primaryColor: "#10b981",
    borderRadius: 12,
  },
});

BuildBetterFeedback.create({
  apiKey: "YOUR_API_KEY",
  feedbackSourceId: "YOUR_SOURCE_ID",
  mode: "slide-out",
  title: "Report an Issue",
  fields: [
    { type: "star-rating", name: "severity", label: "How severe is this issue?", required: true },
    { type: "text", name: "summary", label: "Summary", required: true, placeholder: "Brief description of the issue" },
    { type: "textarea", name: "steps", label: "Steps to reproduce", placeholder: "1. Go to...\n2. Click on...\n3. See error" },
    { type: "select", name: "browser", label: "Browser", options: ["Chrome", "Firefox", "Safari", "Edge", "Other"] },
  ],
  metadata: {
    page_url: window.location.href,
    user_agent: navigator.userAgent,
  },
});

BuildBetterFeedback.create({
  apiKey: "YOUR_API_KEY",
  feedbackSourceId: "YOUR_SOURCE_ID",
  mode: "floating",
  position: "bottom-right",
  title: "Feedback",
  fields: [
    { type: "emoji", name: "sentiment", label: "How do you feel?", required: true },
    { type: "textarea", name: "feedback", label: "Tell us more" },
  ],
  theme: {
    primaryColor: "#22c55e",
    backgroundColor: "#1a1a2e",
    textColor: "#e2e8f0",
    borderRadius: 12,
  },
});